<template>
  <!-- row1, contains 2 card -->
  <t-row>
    <t-col :span="6">
      <t-card title="健康" bordered hover-shadow class="card">
        <t-row justify="center"><t-space :size="10" align="center">
            <t-icon name="check-circle-filled" style="color: green" size="40px"></t-icon>
            <span style="font-size: 20px">您的服务器运行良好</span>
          </t-space></t-row>
        <template #actions>
          <a @click.prevent="router.replace('/serverList')"><t-icon name="info-circle"></t-icon></a>
        </template>
      </t-card>
    </t-col>

    <t-col :span="6">
      <t-card title="服务器" bordered hover-shadow class="card">
        <t-space :size="20">
          <t-statistic title="已托管服务器" :value="1"></t-statistic>

          <t-statistic title="运行中服务器" :value="1"></t-statistic>

          <t-statistic title="需要关注" :value="0"></t-statistic>
        </t-space>
        <template #actions>
          <a @click.prevent="router.replace('/serverList')"><t-icon name="info-circle"></t-icon></a>
        </template>
      </t-card>
    </t-col>

  </t-row>

  <!-- row1, contains 1 card -->
  <t-row>
    <t-col :span="12">
      <t-card title="用户" bordered hover-shadow class="card">
        <t-space :size="20">
          <t-statistic title="已注册用户" :value="1"></t-statistic>

          <t-statistic title="已登录用户" :value="1"></t-statistic>
          <t-statistic title="最近使用" :value="1"></t-statistic>
        </t-space>
        <template #actions>
          <a @click.prevent="router.replace('/user')"><t-icon name="info-circle"></t-icon></a>
        </template>
      </t-card>
    </t-col>
  </t-row>

  <!-- row3, contains 1 card -->
  <t-row>
    <t-col :span="12">
      <t-card title="日志" bordered hover-shadow class="card" style="overflow-y: scroll; scrollbar-width: none">
        <t-list stripe>
          <t-list-item style="position: relative;" v-for="(item, index) in logData" :key="index">
            {{ item.level }} {{ item.data.slice(0, 120) }} <span style="position: absolute;right: 10px;">{{
              item.timestamp
              }}</span>
          </t-list-item>
        </t-list>
        <template #actions>
          <a @click.prevent="router.replace('/log')"><t-icon name="info-circle"></t-icon></a>
        </template>
      </t-card>
    </t-col>
  </t-row>

</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
const router = useRouter()

let logData: any = ref([])

onMounted(() => {
  axios.get('/api/log')
    .then((response) => {
      response.data?.forEach((element: any) => {
        element.timestamp = (new Date(element.timestamp*1000)).toLocaleString()
        element.data = element.data.slice(0,100)+'...'
      })
      logData.value = response.data.slice(0, 60) as any
    }).catch((error) => {
      console.error('[Log]Error Getting Log: ', error)
    })
})
</script>

<style scoped>
.container {
  justify-content: center;
}

.card {
  min-height: 170px;
  max-height: 800px;
  margin: 10px;
  overflow: auto;
}
</style>
